import React from 'react'
import {Outlet,NavLink} from "react-router-dom"
import { Tabbar } from 'react-vant'
import {setIcon} from "../gloabl/index"
import  {mainrouter} from "../router/Router_config"
type Props = {}

const Index = (props: Props) => {
  return (
    <div className='box'>
      <header></header>
      <main><Outlet></Outlet></main>
      <footer>
      <Tabbar>
        {
        mainrouter.map((item,index)=>{
          return  <Tabbar.Item  icon={setIcon(item.icon)} key={index} >
            <NavLink to={item.path}>{item.title}</NavLink>
          </Tabbar.Item>
        })
        }
       
     
      </Tabbar>
      </footer>
    </div>
  )
}

export default Index